<template>
    <div>
        <el-dropdown trigger="click" @command="handSize">
            <div>
                <svg-icon class-name="size-icon" icon-class="size"></svg-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item
                        v-for="item in sizeOptions"
                        :key="item.value"
                        :command="item.value"
                        :disabled="item.value === size"
                    >
                    {{ item.label }}

                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts">
import { Size} from '@/plugins/element';
import { defineComponent,ref,getCurrentInstance,ComponentInternalInstance,ComponentPublicInstance,computed,nextTick} from 'vue';
import {useRoute,useRouter} from 'vue-router';
import { useStore } from '@/store';
export default defineComponent({
    name:'SizeSelect',
    setup(){
        const store = useStore()
        const route = useRoute()
        const router = useRouter()
        const { proxy } = getCurrentInstance() as ComponentInternalInstance
        const size = computed(()=> store.getters.size)
        const sizeOptions = ref([
            {label:'Default',value:'default'},
            {label:'Medium',value:'medium'},
            {label:'Small',value:'small'},
            {label:'Mini',value:'mini'}
        ])
        //刷新当前路由
        const refreshView =()=>{
            const { fullPath} = route;
            nextTick(()=>{
                // 重定位到中间页，实现vue 中当前路由刷新
                router.replace({
                    path:'/redirect' + fullPath
                })
            })
        }
        // command 点击获取按钮的command 属性值，作为size 值
        const handSize = (command:Size)=>{
            // 修改element-plus 组件尺寸
            (proxy as ComponentPublicInstance).$ELEMENT.size = command
            // 更新store
            store.dispatch('app/setSize', command)
            // 切换size需要刷新路由才能生效
            refreshView()
            proxy?.$message.success({
                type: 'success',
                message: 'Switch Size Success'
            })
        }
        return {
            sizeOptions,
            size,
            handSize
        }
    }
})
</script>
<style lang="scss">
.size-icon{
    font-size:18px;
}
</style>
